<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM元素节点属性</title>
    <style>
        div{
            width: 400px;
            margin: 50px auto;
            padding:  20px;
        }
        #id1{
            border: 1px solid red;
        }
        #id2{
            border: 1px solid blue;
        }
        span[data-order-state = "new"]{
            color: red;
        }
        span[data-order-state = "pedding"]{
            color: green;
        }
    </style>
</head>
<body>
    <div id="id1" some-attribute="abc">
        <p>文本框: <input type="text" name="username" value="admin"></p>
        <p>复选框: <input type="checkbox" name="hobby"/></p>
        <p><a href="">超链接</a></p>
        <p><span data-order-state="new">订单</span></p>
    </div>
    <script>
            const div = document.getElementById("id1");
            //div.innerHTML = "<p>修改内容</P>";
            console.log(div.outerHTML);
            console.log(div.textContent);
            //div.outerHTML = "<p>修改内容</P>";
            console.log(div.id);
            div.id = "id2";
            
            const input = div.querySelector("input[name = 'username']");
            console.log(input.type);
            console.log(input.name);
            console.log(input.value);
            input.type = "password";
            input.name = "password";
            //input.value = "password"; <input />标签DOM对象修改不了value
            const checkbox = div.querySelector("input[name = 'hobby']");
            console.log(checkbox.checked);
            checkbox.checked = 1;
            
            const a = div.querySelector("a");
            console.log(a.href);
            
            console.log(div.getAttribute("some-attribute"));
            div.setAttribute("hello","abcdefg");

            const span = div.querySelector("span");
            //data-order-state <-> dataset.orderState
            console.log(span.dataset.orderState);
            span.dataset.orderState = "pedding";
            span.textContent = "待处理订单"
    </script>
</body>
</html>